<script setup lang="ts">
import { useThemeToken } from '@/hooks';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const token = useThemeToken();
const router = useRouter();

const props = defineProps<{
	item: any;
}>();

const enable = ref(props.item.Enable === 1);

</script>

<template>
	<a-card class="w-420 card cursor-pointer" @click="router.push(`/care/detail/${item.ID}`)">
		<div class="flex justify-between">
			<h3>{{ item.Name || '无名称' }}</h3>
			<div>
				<a-tag :color="enable ? token.colorPrimary : ''" class="mr-0">
					{{ enable ? '启用' : '禁用' }}
				</a-tag>
			</div>
		</div>
		<div class="desc">{{ item.Desc || '无描述' }}</div>
		<!-- <div class="flex gap-20">
			<a-form-item class="mb-0" label="饮食类">5项</a-form-item>
			<a-form-item class="mb-0" label="清洁类">3项</a-form-item>
			<a-form-item class="mb-0" label="活动类">2项</a-form-item>
		</div> -->
	</a-card>
</template>
<style lang="less" scoped>
.card {
	:deep(.ant-card-body) {
		padding: 20px;
	}

	:deep(label),
	.desc {
		color: #999;
	}
}
</style>
